<template>
	<div>
		<div v-if="query.companyName === ''">
			<div class="my-code">点击公司查看岗位详情</div>
		</div>
		<div v-else>
			<!--工具栏-->
			<div class="head-container">
				<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
				<crudOperation :permission="permission" />
				<!--表单组件-->
				<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU"
					:visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
					<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
						<el-form-item label="所属公司">
							<el-tag style="width: 370px;">{{ query.companyName }}</el-tag>
						</el-form-item>
						<el-form-item label="职位名称">
							<el-input v-model="form.name" style="width: 370px;" />
						</el-form-item>
						<el-form-item label="职位介绍">
							<el-input v-model="form.brief" :rows="3" type="textarea" style="width: 370px;" />
						</el-form-item>
						<el-form-item label="备注">
							<el-input v-model="form.remark" :rows="3" type="textarea" style="width: 370px;" />
						</el-form-item>
						<el-form-item label="状态">
							<el-radio v-model="form.enabled" v-for="item in dict.data_status" :key="item.id"
								:label="item.value">{{ item.label }}</el-radio>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button type="text" @click="crud.cancelCU">取消</el-button>
						<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
					</div>
				</el-dialog>
				<!--表格渲染-->
				<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
					@selection-change="crud.selectionChangeHandler">
					<el-table-column type="selection" width="55" />
					<el-table-column prop="company.name" label="所属公司" width="220"/>
					<el-table-column prop="name" label="职位名称" width="150"/>
					<el-table-column prop="brief" label="职位介绍" />
					<!-- <el-table-column prop="remark" label="备注" /> -->
					<el-table-column label="状态" align="center" prop="enabled" width="70">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.enabled" active-color="#409EFF" inactive-color="#F56C6C"
								@change="changeEnabled(scope.row, scope.row.enabled,)" />
						</template>
					</el-table-column>
					<el-table-column v-if="checkPer(['admin','companyJob:edit','companyJob:del'])" label="操作"
						width="115px" align="center">
						<template slot-scope="scope">
							<udOperation :data="scope.row" :permission="permission" />
						</template>
					</el-table-column>
				</el-table>
				<!--分页组件-->
				<pagination />
			</div>
		</div>
	</div>
</template>

<script>
	import crudCompanyJob from '@/api/companyJob'
	import CRUD, {
		presenter,
		header,
		form,
		crud
	} from '@crud/crud'
	import rrOperation from '@crud/RR.operation'
	import crudOperation from '@crud/CRUD.operation'
	import udOperation from '@crud/UD.operation'
	import pagination from '@crud/Pagination'

	const defaultForm = {
		jobId: null,
		companyId: null,
		name: null,
		brief: null,
		remark: null,
		enabled: 'true'
	}
	export default {
		name: 'CompanyJob',
		components: {
			pagination,
			crudOperation,
			rrOperation,
			udOperation
		},
		mixins: [presenter(), header(), form(defaultForm), crud()],
		dicts: ['data_status'],
		cruds() {
			return CRUD({
				title: '公司岗位',
				url: 'api/companyJob',
				query: {
					companyName: ''
				},
				idField: 'jobId',
				sort: 'jobId,desc',
				crudMethod: {
					...crudCompanyJob
				},
                queryOnPresenterCreated: false
			})
		},
		data() {
			return {
				companyId: null,
				permission: {
					add: ['admin', 'companyJob:add'],
					edit: ['admin', 'companyJob:edit'],
					del: ['admin', 'companyJob:del']
				},
				rules: {}
			}
		},
		methods: {
			// 钩子：在获取表格数据之前执行，false 则代表不获取数据
			[CRUD.HOOK.beforeRefresh]() {
				return true
			},
			[CRUD.HOOK.afterToCU](crud, form) {
				if (form.jobId)
					form.companyId = `${form.companyId}`
				else
					form.companyId = this.companyId
				form.enabled = `${form.enabled}`
			}
		}
	}
</script>

<style scoped>

</style>
